<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>住院月度统计</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
  <form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">选择年份:</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
        </div>
      </div>
      <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
      </div>
    </div>
  </form>
</blockquote>/
<!-- 搜索条件结束 -->
<div id="container" style="height: 400px"></div>
</body>
<script src="../../js/echarts.min.js" charset="utf-8"></script>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="none">
  layui.use([ 'jquery', 'layer', 'form', 'table','laydate'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laydate=layui.laydate;

    laydate.render({
      elem:'#year',
      type:'year',
      value:new Date()
    });
    $("#doSearch").click(function(){
      getData();
    });

    function getData(){
      var year=$("#year").val();
      if(year===""){
        year=new Date().getFullYear();
      }
      $.post("/web/finance/zhuYuanYearFinance",{year:year},function(data){
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'',
              type:'bar',
              barWidth: '60%',
              data:data
            }
          ]
        };
        ;
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      });
    }
    getData();
  });

</script>
</html>